<div class="block-zone">
  <div class="block-table-main">
    <div class="block-table-row" (click)="openBlock(block)" [ngClass]="{'active': currentBlock.symbol == block.symbol }" *ngFor="let block of blockData; trackBy: getBlockSymbol">
      <span class="block-table-cell" [ngClass]="getSuitableClass(header, block[header.key])" *ngFor="let header of blockHeaders.bodyHeader">
          {{ header.key === 'symbol' ? (block['symbol'] | stripExtension): header.withUnit ? (block[header.key] | optimizeUnit) : (block[header.key])}}
          </span>
      <span class="arrow"></span>
    </div>
  </div>
</div>
<!--<div class="block-zone">
  <quote-table class="block-table" [updateEventSource]="stockParams" [headers]="blockHeaders" [options]="blockTableOptions"
    (quoteClick)="openBlock($event)"></quote-table>
</div>-->
<div class="quote-zone">
  <quote-table class="stock-table" [updateEventSource]="blockParams" [scrollable]="true" [headers]="quoteHeaders" [options]="stockTableOptions"
    (quoteClick)="openStock($event)"></quote-table>
</div>